<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <input type="text" name="" id=""><button>添加</button>
    <ul>

    </ul>
    <script>
        /**
         * 需求：文本框输入内容，按添加，添加到ul列表中
         * 1. 如果文本框内容为空，弹框不能为空
         * 2. 如果是重复的名字，弹框 xxx已存在
         * 
         */
        // 1. 获取 元素
        var oInput = document.querySelector('input');
        var oBtn = document.querySelector('button');
        var oUl = document.querySelector('ul');

        // 创建一个li内容的数组
        var list = [];
        // 通过创建一个新数组的方式实现

        oBtn.onclick = function(){
            // 1. 获取keywords
            var keywords = oInput.value.trim();
            // 1-1 判断 keywords是否为空
            if(keywords === ''){
                alert('内容不能为空');
                oInput.value = '';
                return;
            }
            // 1-2. 判断keywords 在list数组中是否已经存在
            if(list.includes(keywords)){
                alert(keywords + '已存在');
                oInput.value = '';
                return;
            }
            list.push(keywords);
            // 方式一： 拼接字符串
            // var str = '';
            // for(var i = 0; i < list.length; i++){
            //     str += '<li>'+list[i]+'</li>';
            // }
            // // 将拼接好的字符串，设置为ul的内容
            // oUl.innerHTML = str;
            // // 清空input
            // oInput.value = '';

            // 方式二：追加新元素
            // 清空ul中的内容
            oUl.innerHTML = '';
            var fragement = document.createDocumentFragment();
            
            for(var i = 0; i < list.length; i++){
                var oLi = document.createElement('li');
                oLi.innerHTML = list[i];
                fragement.appendChild(oLi);
            }
            oUl.appendChild(fragement);
            oInput.value = '';

            // 方式三：使用文档碎片
            // var fragment = document.createDocumentFragment();
            // var oLi = document.createElement('li');
            // for(var i = 0; i < list.length; i++){
            //     oLi.innerHTML = list[i];
            //     fragment.appendChild(oLi);
            // }
            // oUl.appendChild(fragment);
            // oInput.value = '';
            // var str = '';
            // for(var i = 0; i < list.length; i++){
            //     str += '<li>' + list[i] + '</li>';
            // }
            // fragment.innerHTML = str;
            // oUl.appendChild(fragment);
        }
        
    </script>
</body>

</html>